<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{pageTitle}}</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg05.png')" mode="widthFix"></image>
			<view class="bg_content">
				<view class="main">
					<view class="ceng">
						<view class="hao" v-if="type==0">车辆维修保养记录</view>
						<view class="hao" v-if="type==2">里程查询({{price}}元)</view>
						<view class="hao" v-if="type==4 || type == 1">车信盟报告检查({{price}}元)</view>
						<view class="hao" v-if="type==6">维保记录+出险记录</view>
						<view class="hao" v-if="type==7">电池查询({{price}}元)</view>
						<view class="note_2" v-if="type==0">查询时间为9:00-18:00，若在范围外则次日进行查询</view>
						<view class="note" v-if="type==2">公里数查询</view>
						<view class="note" v-if="type==4 || type == 1">目前业内公认最权威、最准确、大事故展现最好的出险报告，查得和准确率99.9%</view>
						<view class="note" v-if="type==6">目前业内公认最权威、最准确、大事故展现最好的出险报告，查得和准确率99.9%</view>
						<view class="note" v-if="type==7">查询电池寿命</view>
					</view>
					<view class="kuai">
						<view class="list">
							<view class="left">
								<view class="red">*</view>
								<view class="text">行驶证图片</view>
							</view>
							<view class="right">证件图完整清晰无遮挡</view>
						</view>
						<view class="upload">
							<image :src="image" mode="" style="width: 280px; height: 200px;" @tap="up_img()"></image>
							<!-- <u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="280" height="200">
								
							</u-upload> -->
						</view>
						<view class="list">
							<view class="left">
								<view class="red">*</view>
								<view class="text">车架号</view>
							</view>
							<!-- <view class="right">什么是车架号（VN）号</view> -->
						</view>
						<view class="box">
							<input type="text" value="" placeholder="请输入17位车架号" v-model="vinstr"/>
						</view>
						
						<view class="check" :data-url="'/pages/index/service_log?stype='+type" @click="gotopage">查看记录</view>
					</view>
				</view>
				
				<!-- <view class="agree">
					<checkbox style="scale: 0.7;" color="#FF7F22" :checked="checked" @tap="checkedAuto"></checkbox>
					<view class="a_txt">使用本服务表明您已同意
						<view class="a_t2" @click="$r('/pages/public/art_detail?id=1')">《用户协议》</view>
					</view>
				</view> -->
				<view class="agree_2">
					<view class="title">查询须知</view>
					<!-- <view>1.查询历史车架号将不再扣除次数或收取费用;</view> -->
					<view>1.由于查询量比较大，有时可能存在延迟或者卡单，请勿着急，可以联系当地运营人员或全国客服专用微信，或拨打:17015900000;</view>
					<view class="third">2.声明:查询结果信息取决于第三方采集的信息。本平台无法保证查询信息的准确性、及时性和完整性。该报告仅作为您评估车辆的重要信息之一。车况请您结合实际甄别。</view>
				</view>
				<view class="confirm" @click="confirm_sign()" v-if="type == 1">签名并查询</view>
				<view class="confirm" @click="confirm_order()" v-if="type != 1">立即查询</view>
			</view>
		</view>
		
		<uni-popup ref="popup" v-model="sure_show" :round="10" mode="bottom" closeable="true" @close="sure_close" >
			<view class="inside">
				<view class="title">确认订单</view>
				<view class="sub">
					<view class="mw04">
						<view>{{car_fac}}</view>
						<view>￥{{price}}</view>
					</view>
				</view>
				<view class="confirm_2" @click="sure_order([])">去支付</view>
				<!-- <block v-for="(item,idx) in sure_list" :key="index">
					<view class="sub" @click="sure_order(item)">
						<view class="mw01">共享数据分析报告{{idx+1}}</view>
						<view class="mw02" v-if="item.license_require == 1">需要行驶证</view>
						<view class="mw03">出单率:{{parseFloat(item.suc_ratio) * 100}}%预计时长:{{item.avg_time}}秒</view>
						<view class="mw04">
							<view>准确率高</view>
							<view>￥{{item.price}}</view>
						</view>
					</view>
				</block> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				pageTitle:'',
				type:0,
				checked:true,
				fileList6:[],
				vinstr: '',
				price:0,
				sure_show:false,
				chanle_params:[],
				sure_list:[],
				pay_price:0,
				image:this.getImgSrc('/static/xsz.png'),
				s_image:'',
				car_fac:'',
				costPrice:0,
			}
		},
		onLoad(e) {
			let that = this;
			that.pageTitle = e.title;
			that.type = e.type;
			that.loadData();
			uni.$on('sign_image', (data) => {
				that.s_image = data;
				that.real_sure_order([]);
			});
		},
		methods: {
			sure_close(){
				this.sure_show = false;
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				that.Net._get('other/search_price', {type:that.type}, res => {
					if (res.code == 1) {
						that.price = res.data.price;
					}
				});
			},
			checkedAuto() {
				let that = this;
				that.checked = !that.checked;
			},
			// 行驶证识别
			check_ocr(image){
				let param = {base64_img : image};
				this.Net._post('auth/index/check_api_ocr', param, res => {
					if (res.code == 1){
						this.vinstr = res.data; 
					}else{
						this.Msg.Fail(res.msg);
						return '';
					}
				});
			},
			checkVIN(VIN){
			    if(typeof(VIN)!='string') return false;
			    if(VIN.length!=17) return false;
			    VIN = VIN.toUpperCase();
			    let RE = /^[A-HJ-NPR-Z\d]{8}[X\d][A-HJ-NPR-Z\d]{3}\d{5}$/
			    if(!RE.test(VIN)) return false;
			    let cOT = {
			        '0':0,'1':1,'2':2,'3':3,'4':4,'5':5,'6':6,'7':7,
			        '8':8,'9':9,'A':1,'B':2,'C':3,'D':4,'E':5,'F':6,
			        'G':7,'H':8,'J':1,'K':2,'L':3,'M':4,'N':5,'P':7,
			        'R':9,'S':2,'T':3,'U':4,'V':5,'W':6,'X':7,'Y':8,
			        'Z':9
			    };
			    let xWT = [8,7,6,5,4,3,2,10,0,9,8,7,6,5,4,3,2]; // 因为第9位权重为0，所以原来是什么字符不影响结果，可以方便后面计算
			    let sum = 0;
			    let VINs = VIN.split('');
			    for(let i=0;i<17;i++){
			        sum = sum + cOT[ VINs[i] ] * xWT[i];
			    }
			    let cT = ['0','1','2','3','4','5','6','7','8','9','X'];
			    if( cT[ (sum%11) ] == VINs[8]) return true;
			    return false;
			},
			confirm_order() {
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				if(!this.checked){
					this.Msg.Fail('请勾选用户协议');
					return '';
				}
				if (this.image == this.getImgSrc('/static/xsz.png')){
					this.Msg.Fail('请上传行驶证图片');
					return '';
				}
				if (this.vinstr == '') {
					this.Msg.Fail('请输入车架号');
					return '';
				}
				if (this.checkVIN(this.vinstr) == false){
					this.Msg.Fail('车架号格式有误,请检查');
					return '';
				}
				if (this.type == 0){
					this.real_search_order();
				}else{
					this.throttle(this.real_sure_order([]), 2000)
				}
			},
			real_search_order(){
				let param = {
					vin: this.vinstr,
					stype: this.type,
				};
				uni.showLoading({
					title: '查询中'
				});
				this.Net._post('other/check_brand', param, res => {
					if (res.code == 1) {
						setTimeout(() => {
							uni.hideLoading();
							this.price = parseFloat(this.price) + parseFloat(res.costPrice);
							//this.costPrice = res.costPrice;
							this.car_fac = res.changjia;
							this.sure_show = true; 
							this.$refs.popup.open('top');
						}, 2000);	
					} else {
						console.log(res.code)
						uni.hideLoading();
						this.Msg.Fail('该车不支持查询');
						return '';
					}
				});
				
			},
			sure_order(item){
				this.throttle(this.real_sure_order(item), 800)
			},
			real_sure_order(item) {
				uni.showLoading({
					title: '请稍后'
				});
				let param = {
					img_data: this.image,
					vin: this.vinstr,
					stype: this.type,
					chanle_params: item,
					s_image:this.s_image,
					pay_price:this.price,
				};
				this.Net._post('index/create_car_order', param, res => {
					if(res.code == 1){
						setTimeout(() => {
							this.order = res.data;
							this.real_confirm();
						}, 1500); 
					}else{
						uni.hideLoading();
						this.Msg.Fail(res.msg);
						return '';
					}
				});
			},
			async real_confirm() {
				uni.hideLoading();
				let that = this;
				let data = {
					order_id: this.order.id,
					money: this.order.pay_price,
					plat: 'miniapp'
				};
				that.Net._post('auth/order/car_pay', data, rex => {
					if (rex.code == 1) {
						let orderData = rex.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp:orderData.timeStamp,
							nonceStr: orderData.nonceStr,
							package: orderData.package,
							signType: orderData.signType,
							paySign: orderData.paySign,
							success: function(res) {
								uni.showModal({
									title: '提示',
									content: '提交成功,稍后可查看报告',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											//console.log('用户点击确定');
											uni.setStorageSync('service_pay', 1);
											uni.navigateTo({
												url: '/pages/index/service_log'
											});
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.navigateTo({
									url: '/pages/index/service_log'
								});
							}
						});
					}
				});
			},
			up_img(e) {
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					});
					return '';
				}
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], // 可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], // 可选择性开放访问相册、相机
					success: function (res) {
						const temFilePath = res.tempFilePaths; // 图片选择完成后 获取该图片的路径
						uni.uploadFile({
							url:that.Cfg.Setting.root + 'index/lb_upload', // 上传文件的Controller
							filePath: temFilePath[0], // 要上传的文件路径
							name:'file',
							success: (res) => {
								// that.imageWidth = '35%';
								let img = JSON.parse(res.data)
								that.image = img.data;
								that.check_ocr(img.data);
							}
						})
					}
				});
			},
			confirm_sign() {
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				if(!this.checked){
					this.Msg.Fail('请勾选用户协议');
					return '';
				}
				if (this.image == this.getImgSrc('/static/xsz.png')){
					this.Msg.Fail('请上传行驶证图片');
					return '';
				}
				if (this.vinstr == '') {
					this.Msg.Fail('请输入车架号');
					return '';
				}
				if (this.checkVIN(this.vinstr) == false){
					this.Msg.Fail('车架号格式有误,请检查');
					return '';
				}
				uni.navigateTo({
					url: '/pages/sign/sign'
				});
			},
			throttle(fn, delay) {
				let timer = null;
				return function() {
					let context = this, args = arguments;
					if (!timer) {
						timer = setTimeout(() => {
							fn.apply(context, args);
							timer = null;
						}, delay);
					}
				};
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		},
	}
</script>

<style lang="scss">
	
	.header{
		background-color: transparent !important;
		height: 18vw !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back{
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.main{
		width: calc(100%);
		background-color: #fff;
		padding:7vw 4vw;
		height:30vw;
		border-radius: 3vw;
		.img{
			width: 20%;
			float: right;
		}
		.ceng{
			position: absolute;
			z-index: 1;
			width: 88%;
			
			.title{
				color: #0d172d;
				font-size: 4vw;
				font-weight: bold;
			}
			.note{
			color: #828792;
			font-size: 3.5vw;
			margin-top: 2vw;
			}
			.note_2{
			color: #f90202;
			font-size: 3.5vw;
			margin-top: 2vw;
			}
			.hao{
				color: #0d172d;
				font-size: 3.5vw;
				font-weight: bold;
				margin-top: 1vw;
			}
			
		}
		.kuai{
				background-color: #fff;
				border-radius: 3vw;
				width: 100%;
				position: absolute;
				padding: 4vw;
				left: 0;
				top:33vw;
				.list{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 12vw;
					padding: 0vw 3vw;
					font-size: 3.5vw;
					.left{
						display: flex;
						.red{
							color: #fc0505;
							margin-right: 2vw;
						}
						.text{
							color: #0d172d;
						}
					}
					.right{
						color: #999;
					}
				}
				.upload{
					margin-left: calc(50% - 150px);
				}
				.box{
					width: 92%;
					margin: auto;
					input{
						border-bottom: 1px solid #dfdfe0;
						font-size: 3.5vw;
						height: 10vw;
						line-height: 10vw;
					}
				}
				
			}
	}
	.check{
		border:1px solid #d8a407;
		width: 20vw;
		text-align: center;
		height: 8vw;
		line-height: 8vw;
		border-radius: 8vw;
		font-size: 3.5vw;
		color: #d8a407;
		position: absolute;
		left: calc(50% - 10vw);
		margin: 4vw 0;
		// top:128vw;
	}
	.agree{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3.5vw;
			color: #999999;
			position: absolute;
			left: 0;
			// bottom: 150rpx;
			margin-top: 105vw;
			.a_icon{
				font-size: 5vw;
				color: #C8C8C8;
				padding-right: 20rpx;
				padding-top: 1rpx;
			}
			.a_icon_s{
				color: #267BFA;
			}
			.a_txt{
				display: flex;
				align-items: center;
				.a_t2{
					color: #257BF9;
				}
			}
		}
	.agree_2{
		width: 100%;
		// display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3.5vw;
		color: #999999;
		position: absolute;
		left: 0;
		// bottom: 150rpx;
		margin-top: 105vw;
		.title{
			padding: 2vw;
			font-size: 4.5vw;
			color: #000;
		}
		.third{
			margin-bottom: 20vw;
		}
	}
	.confirm02{
		background-color: #FC5D20;
		color: #12161D;
		width: 92%;
		margin:5vw auto 0;
		text-align: center;
		font-size: 4vw;
		height: 12vw;
		line-height: 12vw;
		border-radius: 12vw;
		font-weight: bold;
		position: absolute;
		left: 4%;
		bottom: 30rpx;
	}
	
	image{
		width: 100%;
	}
	
	.inside {
		background-color: #f4f4f4;
		border-radius: 3vw 3vw 3vw 3vw;
		max-height: 100vw;
		overflow-y: auto;
		margin-top: 38%;
	}
	
	.inside .title {
		text-align: center;
		width: 100%;
		padding-top: 4vw;
		font-size: 4vw;
		font-weight: bold;
	}
	
	.inside .sub {
		width: 94%;
		margin: 3vw auto;
		background-color: #fff;
		border-radius: 2vw;
		padding: 2vw 4vw 4vw 4vw;
		box-sizing: border-box;
	}
	
	.inside .mw01 {
		font-size: 3.5vw;
		color: #22396d;
		border-bottom: 1px solid #ebebeb;
		height: 12vw;
		line-height: 12vw;
	}
	
	.inside .mw02 {
		font-size: 3.5vw;
		color: #22396d;
		padding: 3vw 0vw 3vw 0vw;
	}
	
	.inside .mw03 {
		font-size: 3.5vw;
		color: #787789;
	
	}
	
	.inside .mw04 {
		font-size: 3.6vw;
		color: #eaa152;
		display: flex;
		justify-content: space-between;
		padding-top: 3vw;
	}
	
	.confirm_2 {
	    width: 32%;
	    height: 13vw;
	    border-radius: 13vw;
	    line-height: 13vw;
	    text-align: center;
	    background-color: #FC5D20;
	    color: #fff;
	    font-size: 4vw;
	    bottom: 3vw;
	    z-index: 99;
	    font-weight: bold;
	    margin-bottom: 3%;
		float: right;
	}
	
</style>
